<template>
  <div class="data-layer">
    <div class="d-l-list">
      <div class="d-l-item m-r-2-v" v-for="(item, index) in dList" :key="'dlt_' + index">
        <div class="d-l-title">{{ item.title }}</div>
        <div style="display: flex;justify-content: center;">
          <div :class="item.icon + '-cls'"></div>
          <div class="d-l-val">{{ item.val }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useBigScreenStore } from "@/pinia/bigScreen";
const bsStore = useBigScreenStore();
let dList = ref([
  { title: '改造前累计电量/kwh', val: 0, ratio: '', icon: 'ljdl' },
  { title: '本月节能/kwh', val: 0, ratio: '', icon: 'byjn' },
  { title: '本年节能/kwh', val: 0, ratio: '', icon: 'bnjn' },
  { title: '累计节能/kwh', val: 0, ratio: '', icon: 'ljjn' },
  { title: '累计减碳排放量/kg', val: 0, ratio: '', icon: 'tpfl' }
]);

watch(() => bsStore.projectId, (newValue, oldValue) => {
  if (newValue === 'all') {
    // 避免重复计算
    if (localStorage.getItem("big_center_top")) {
      dList.value = JSON.parse(localStorage.getItem("big_center_top"))
    } else {
      getAllDetailList()
    }
  } else {
    getDetailList()
  }
})

const getAllDetailList = () => {
  let obj = { ljdl: 0, byjn: 0, bnjn: 0, ljjn: 0, tpfl: 0 }
  bsStore.projectList.forEach(item => {
    obj.ljdl += item.baselineEnergy.toFixed(2)
    obj.byjn += item.monEnergySaving
    obj.bnjn += item.yearEnergySaving
    obj.ljjn += parseFloat(item.baselineEnergy - item.totalPowerConsumption).toFixed(2)
  })
  obj.tpfl = (obj.ljdl / 0.272)
  Object.keys(obj).forEach((key) => { obj[key] = obj[key].toFixed(2) });
  dList.value[0].val = obj.ljdl
  dList.value[1].val = obj.byjn
  dList.value[2].val = obj.bnjn
  dList.value[3].val = obj.ljjn
  dList.value[4].val = obj.tpfl
  localStorage.setItem("big_center_top", JSON.stringify(dList.value))
}

const getDetailList = () => {
  //改造前累计电量
  dList.value[0].val = (bsStore.project.baselineEnergy).toFixed(2)
  //本月节能
  dList.value[1].val = bsStore.project.monEnergySaving.toFixed(2)
  dList.value[1].ratio = parseFloat(bsStore.project.energyEfficiency) / 12 / 30 * (new Date().getDate()).toFixed(2)
  //本年节能
  dList.value[2].val = bsStore.project.yearEnergySaving.toFixed(2)
  dList.value[2].ratio = bsStore.project.energyEfficiency
  //积累节能
  dList.value[3].val = parseFloat(bsStore.project.baselineEnergy - bsStore.project.totalPowerConsumption).toFixed(2);
  dList.value[3].ratio = bsStore.project.energyEfficiency
  //累计减碳排放量
  dList.value[4].val = (dList.value[3].val * 0.272).toFixed(2)
}

</script>


<style lang="scss" scoped>
.data-layer {
  position: absolute;
  width: 100%;
  margin-top: 5.5rem;
  z-index: 10;

  .d-l-list {
    display: flex;
    justify-content: center;
    font-size: 16px;
  }


  .d-l-item {
    text-align: center;
    background: url(/src/assets/wbe4/data-k.png) center no-repeat;
    background-size: 100% 100%;
    padding: 10px;
    background-color: #002235;
    min-width: 80px;
    border-radius: 20px;
    box-shadow: inset 0 0 40px #0fbff3;
  }

  .ljdl-cls {
    background: url(/src/assets/wbe4/ljdl.png) center no-repeat;
    background-size: 100% 100%;
    padding: 16px;
  }

  .byjn-cls {
    background: url(/src/assets/wbe4/byjn-1-1.png) center no-repeat;
    background-size: 100% 100%;
    padding: 16px;
  }

  .bnjn-cls {
    background: url(/src/assets/wbe4/bnjn-1.png) center no-repeat;
    background-size: 100% 100%;
    padding: 16px;
  }

  .ljjn-cls {
    background: url(/src/assets/wbe4/ljjn.png) center no-repeat;
    background-size: 100% 100%;
    padding: 16px;
  }

  .tpfl-cls {
    background: url(/src/assets/wbe4/tpfl-1.png) center no-repeat;
    background-size: 100% 100%;
    width: 25px;
    height: 25px;
    margin: 5px;
  }

  .m-r-2-v:not(:last-child) {
    margin-right: 1.5rem;
  }

  .d-l-title {
    font-size: 18px;
    color: #e6f1f1;
    font-weight: bold;
  }

  .d-l-val {
    margin-top: 1vh;
    font-size: 20px;
    color: #ffeb7b;
    font-weight: bold;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  }

}
</style>